<!--created by yuyupeng-->
<!--2023/11/27-->
<!-- sql编辑器，使用的是monaco-editor组件，类vscode风格 -->
<template>
  <div>
    <div
      ref="main"
      :style="{ width: '100%', height: monacoEditorHeight }"
    ></div>
  </div>
</template>

<script setup lang="ts">
  import { defineExpose, onMounted, ref, toRefs } from 'vue';
  import * as monaco from 'monaco-editor';

  const props = defineProps({
    monacoEditorDefaultValue: {
      // 编辑器默认内容
      type: String,
      default: '',
    },
    monacoEditorLang: {
      // 编辑器语言
      type: String,
      default: 'sql',
    },
    monacoEditorHeight: {
      // 编辑器高度
      type: String,
      default: '200px',
    },
    readOnly: {
      // 是否只读
      type: Boolean,
      default: false,
    },
  });
  const { monacoEditorDefaultValue } = toRefs(props); // 根据props创建多个 ref 对象
  const monacoEditorValue = ref<string>(monacoEditorDefaultValue?.value);

  let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null;
  const main = ref<any>();
  /**
   * @description 创建 monacoEditor 对象
   */
  const init = () => {
    monacoEditor = monaco.editor.create(main.value, {
      theme: 'vs-dark', // 主题
      value: monacoEditorValue.value, // 值
      language: props.monacoEditorLang, // 语言
      folding: true, // 是否折叠
      foldingHighlight: true, // 折叠等高线
      foldingStrategy: 'indentation', // 折叠方式  auto | indentation
      showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
      disableLayerHinting: true, // 等宽优化
      emptySelectionClipboard: false, // 空选择剪切板
      selectionClipboard: false, // 选择剪切板
      automaticLayout: true, // 自动布局
      codeLens: false, // 代码镜头
      scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
      colorDecorators: true, // 颜色装饰器
      accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
      lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
      lineNumbersMinChars: 5, // 行号最小字符   number
      // enableSplitViewResizing: false,
      readOnly: props.readOnly, // 是否只读  取值 true | false
    });
    // 监听内容变化
    /* monacoEditor.onDidChangeModelContent((e: any) => {
      console.log(e);
    }); */
  };
  /**
   * @description 获取编辑器的内容
   */
  const getEditorValue = () => {
    monacoEditorValue.value = monacoEditor?.getValue() as string;
    return monacoEditorValue.value;
  };
  onMounted(() => {
    init();
  });
  defineExpose({ getEditorValue }); // 在<srcipt setup>的写法中，想要子组件中的方法可以被父组件调用，要通过defineExpose将方法暴露出去
</script>
